<!--
* @author: lzm
* @date: 2023年11月27日10:52:10
* @description：任务管理页面
* @update: 2023年11月27日10:52:16
-->
<template>
  <div class="container">
    <div class="app-container">
      <div class="inventory-top form-top">
        <el-form ref="taskForm" :model="taskForm" label-width="110px">
          <el-row>
            <el-col :span="7">
              <el-form-item label="日计划编号">
                <el-select
                  style="width: 100%"
                  filterable
                  v-model="taskForm.dayNo"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in dayNoList"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="工作任务">
                <el-select
                  style="width: 100%"
                  filterable
                  v-model="taskForm.name"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in taskFormList"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="开始时间">
                <el-date-picker
                  v-model="dateTimeRange"
                  type="daterange"
                  unlink-panels
                  :clearable="false"
                  align="center"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- <el-col :span="8">
              <el-form-item label="工作内容">
                <el-input
                  style="width: 100%"
                  v-model="taskForm.detail"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col> -->
            <el-col :span="24" style="text-align: center">
              <el-button type="primary" class="chamfer-98" @click="searchBtn"
                >查询</el-button
              >
              <el-button plain class="chamfer-98" @click="resetBtn"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="inventory-bot table-normal">
        <div class="btnBox" style="text-align: right">
          <el-button type="warning" class="chamfer-98" @click="delBtn">
            <span class="btn-middle">
              <span>删除</span>
              <img class="btn-icon" src="~@/assets/material_img/delBtn.png" />
            </span>
          </el-button>
        </div>
        <el-table
          v-loading="loading"
          element-loading-background="rgba(0, 0, 0, 0.6)"
          ref="refTable"
          :data="taskTable"
          :row-key="getRowKeys"
          :expand-row-keys="expands"
          fit
          style="width: 100%"
          header-row-class-name="tableHeader"
          header-cell-class-name="tableTrHeader"
          row-class-name="tableRow"
          cell-class-name="tableCell"
          @row-click="clickTable"
          @expand-change="expandSelect"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="expand" width="1">
            <template v-slot="{ row }">
              <el-table
                :data="row.secondTable"
                header-row-class-name="tableHeaderSnd"
                header-cell-class-name="tableTrHeaderSnd"
                row-class-name="tableRowSnd"
                cell-class-name="tableCellSnd"
                style="width: 98%; margin: 0 auto"
              >
                <el-table-column
                  prop="goodsName"
                  label="物料名称"
                  align="center"
                />
                <el-table-column
                  prop="goodsModel"
                  label="规格型号"
                  align="center"
                />
                <el-table-column
                  prop="planCount"
                  label="待取数量"
                  align="center"
                  v-if="row.type === 1"
                />
                <el-table-column
                  prop="planCount"
                  label="待还数量"
                  align="center"
                  v-if="row.type === 2"
                />
                <el-table-column
                  prop="realCount"
                  label="已取数量"
                  align="center"
                  v-if="row.type === 1"
                >
                  <template v-slot="{ row }">
                    <p class="useBox">
                        <span>
                          {{ row.realCount }}
                        </span>
                      <el-button class="useBtn" size="mini" @click="useBtn(row)">
                        领用详情
                      </el-button>
                    </p>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="realCount"
                  label="已还数量"
                  align="center"
                  v-if="row.type === 2"
                >
                  <template v-slot="{ row }">
                    <p class="useBox">
                        <span>
                          {{ row.realCount }}
                        </span>
                      <el-button class="useBtn" size="mini" @click="useBtn(row)">
                        归还详情
                      </el-button>
                    </p>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            type="selection"
            width="80"
            label-class-name="DisabledSelection"
          />
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column
            prop="dayNo"
            label="日计划编号"
            width="110"
            :show-overflow-tooltip="true"
            align="center"
          />
          <el-table-column
            prop="name"
            label="工作任务名称"
            width="180"
            :show-overflow-tooltip="true"
            align="center"
          />
          <el-table-column
            prop="name"
            label="出入库类型"
            width="180"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template slot-scope="scope">
              {{scope.row.type === 0 ? '未知' : (scope.row.type === 1 ? '出库' : '入库')}}
            </template>
          </el-table-column>
          <el-table-column
            prop="isReceive"
            label="状态"
            align="center"
            width="90"
          >
            <template v-slot="{ row }">
              <!-- 0-未领取 1-领取中 2-已结束 -->
              <span
                :class="
                  row.isReceive == 0
                    ? 'unclaimed'
                    : row.isReceive == 1
                    ? 'receiving'
                    : 'ended'
                "
              >
                {{
                  row.isReceive == 0
                    ? '未领取'
                    : row.isReceive == 1
                    ? '领取中'
                    : '已结束'
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="startTime"
            label="开始时间"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.startTime | transformTime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="指派人"
            align="center"
            width="100"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              {{ scope.row.createTime | transformTime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createBy"
            label="创建人"
            align="center"
            width="100"
          />
        </el-table>
        <!-- 分页 -->
        <paging-component
          :total="total"
          :page-size="taskForm.currentSize"
          :current-page="taskForm.currentPage"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      title="详情"
      :visible="showUseDialog"
      width="666px"
      center
      custom-class="my-dialog  table-normal use-dialog"
      @close="close"
    >
      <el-table
        :data="detailsTable"
        fit
        style="width: 100%"
        header-row-class-name="tableHeader"
        header-cell-class-name="tableTrHeader"
        row-class-name="tableRow"
        cell-class-name="tableCell"
      >
        <el-table-column type="index" label="序号" align="center" width="80" />
        <!-- <el-table-column prop="goodsName" label="物料名称" align="center" /> -->
        <!-- <el-table-column prop="goodsModel" label="规格型号" align="center" /> -->
        <el-table-column prop="shelvesName" label="货架名称" align="center" />
        <el-table-column prop="positionCode" label="库位号" align="center" >
          <template v-slot="{ row }">
            {{row.layerSort}}-{{row.positionName}}
          </template>
        </el-table-column>
        <el-table-column prop="realCount" label="操作数量" align="center" />
      </el-table>
    </el-dialog>
    <!-- 删除弹窗 -->
    <del-dialog
      ref="delMaterial"
      :showDelDialog.sync="showDelDialog"
      @delFn="delFn"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import {
  getTaskList,
  delTaskList,
  getQueryDayNoList,
  getQueryNameList,
  getTaskDetail
} from '@/api/taskManage'
import pagingComponent from '@/components/PagingComponent/index.vue'
import delDialog from '@/components/delDialog/index.vue'
export default {
  components: { pagingComponent, delDialog },
  data() {
    return {
      expands: [], // 展开行,数组形式
      multipleSelection: [], // 表格选中数据
      // 历史库存记录表单
      taskForm: {
        dayNo: '', // 日计划编号
        name: '', // 工作任务
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        currentPage: 1, // 页码
        currentSize: 20 // 页尺寸
      },
      dateTimeRange:[], // 时间范围
      total: 0, // 历史库存记录总数
      dayNoList: [], // 日计划编号
      // 工作任务
      taskFormList: [],
      taskTable: [], // 历史库存记录列表
      loading: true, // 表格加载
      showDelDialog: false, // 控制删除弹层
      detailsTable: [], // 领用详情表格
      showUseDialog: false // 控制领用详情弹窗
    }
  },
  created() {
    this.renderList()
  },
  filters: {
    // 转化时间
    transformTime(time) {
      return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  methods: {
    // 关闭弹窗清空所有值
    close() {
      this.showUseDialog = false
    },
    // 领用详情按钮
    useBtn(row){
      this.showUseDialog = true
      this.detailsTable = row.detailList
    },
    // 获取列表
    async renderList() {
      // 加载动画开始
      this.loading = true
      // 获取任务列表
      const { result } = await getTaskList(this.taskForm)
      this.total = Number(result.totalCount)
      this.taskTable = result.currentData
      // 获取日计划编号下拉列表
      const { result: dayNoList } = await getQueryDayNoList()
      this.dayNoList = dayNoList
      // 获取工作任务下拉列表
      const { result: taskFormList } = await getQueryNameList()
      this.taskFormList = taskFormList
      // 折叠所有二级表格
      this.expands = []
      // 加载动画结束
      this.loading = false
    },
    // 查询
    searchBtn() {
      this.taskForm.currentPage = 1
      if(this.dateTimeRange.length>0){
        this.taskForm.startTime = this.dateTimeRange[0] + ' 00:00:00';
        this.taskForm.endTime = this.dateTimeRange[1] + ' 23:59:59';
      }
      this.renderList()
    },
    // 重置
    resetBtn() {
      this.taskForm = {
        dayNo: '',
        name: '',
        startTime: '',
        endTime: '',
        currentPage: 1,
        currentSize: 20
      }
      this.dateTimeRange=[]
      this.renderList()
    },
    // pageSize改变时会触发(每页数据条数)
    handleSizeChange(val) {
      this.taskForm.currentSize = val
      this.renderList()
    },
    // currentPage改变时会触发(当前页码数)
    handleCurrentChange(val) {
      this.taskForm.currentPage = val
      this.renderList()
    },
    // 删除
    delBtn() {
      // 校验：数据应大于一条
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'error',
          message: '请选择要删除的数据!'
        })
        return
      }
      this.showDelDialog = true
    },
    async delFn() {
      // 创建一个数组，里面存勾选数据的id
      let delArrayData = []
      this.multipleSelection.forEach((item) => {
        delArrayData.push(item.id)
      })
      await delTaskList(delArrayData)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.showDelDialog = false
      if(this.taskTable.length === this.multipleSelection.length){
        if(this.taskForm.currentPage > 1){
          this.taskForm.currentPage--
        }
      }
      this.renderList()
    },
    // 获取勾选数据表格
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 点击表格行
    async clickTable(row, index, e) {
      this.$refs.refTable.toggleRowExpansion(row)
      if (!row.secondTable) {
        // 获取当前表格序号
        let i = this.taskTable.findIndex((ele) => ele.id == row.id)
        // 请求表格详情接口
        let { result } = await getTaskDetail({ taskId: row.id })
        // let secondArray = []
        // result.forEach((item) => {
        //   if (item.detailList) {
        //     secondArray.push(...item.detailList)
        //   }
        // })

        // 将获取的详情放置到当前行的secondTable属性中
        this.$set(this.taskTable[i], 'secondTable', result)
      }
    },
    // 每行的唯一key值 用其id表示
    getRowKeys(row) {
      return row.id
    },
    // 展开行同时折叠其他行
    expandSelect(row, expandedRows) {
      let that = this
      if (expandedRows.length) {
        that.expands = []
        if (row) {
          that.expands.push(row.id)
        }
      } else {
        that.expands = []
      }
    }
  }
}
</script>
<style lang="scss">
@import '~@/styles/_handle.scss';
.inventory-bot {
  .el-table {
    // 表格全选框去除空框
    .DisabledSelection .cell .el-checkbox__inner {
      display: none;
      position: relative;
    }
    .el-table__body-wrapper{
      height: calc(100% - 48px);
      overflow-y: auto;
    }
    .el-table__body-wrapper::-webkit-scrollbar{
      width: 6px;
      height: 8px;
    }
    // 二级
    .tableTrHeaderSnd {
      font-weight: normal;
      border: 1px solid;
      @include border_color('second_table_border_color');
      @include background('second_table_head_bg_color');
    }
    // 二级
    .tableCellSnd {
      color: #ffffff;
      font-size: 18px;
      border: 1px solid;
      @include border_color('second_table_border_color');
      @include background('second_table_row_bg_color');
    }
    .expanded {
      @include background('second_table_expanded_bg_color');
    }
  }
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  @include background('table_hover_color');
}
</style>
<style scoped lang="scss">
@import '~@/styles/handle';

.container {
  height: 100%;
  padding: 24px 30px;
  .app-container {
    width: 100%;
    height: 100%;
    padding: 25px;
    border: 1px solid;
    @include border_image('container_border');
    @include background('content_bg_color');
    .inventory-top {
      @include form_bgcolor('form_bgcolor');
    }
  }
}
.useBox{
  display: flex;
  margin: 0;
  justify-content: center;
  align-items: center;
  padding-left: 120px;
  .useBtn{
    font-size: 14px;
    margin-left: 30px;
  }
}
::v-deep .app-container {
  .inventory-top {
    padding: 20px;
    width: 100%;
    height: 142px;
    border-radius: 10px;
    .el-form-item {
      margin-bottom: 16px;
    }
    .chamfer-98 {
      font-size: 18px;
    }
  }
  .inventory-bot {
    height: calc(100% - 118px);
    padding: 20px 10px;
    .btnBox {
      height: 44px;
      .chamfer-98 {
        font-size: 18px;
        text-align: center;
        .btn-middle {
          display: flex;
          align-items: center;
          .btn-icon {
            margin-left: 4px;
            width: 16px;
            height: 16px;
          }
        }
      }
    }
    .el-table {
      height: calc(100% - 120px);
      tr {
        background: transparent;
      }
      margin-top: 14px;
      background: transparent;
      border: none;
      .tableTrHeader {
        border: none;
      }
      // 二级
      .tableHeaderSnd {
        color: #ffffff;
        font-size: 18px;
      }
      // 隐藏折叠小箭头
      .el-table__expand-icon {
        color: transparent;
      }

    }
    //.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    //  border-bottom: 0;
    //}
    .el-table::before {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0;
    }
  }
}
::v-deep .use-dialog .el-table .el-table__body-wrapper{
  height: 420px;
  overflow-y: auto;
  border: 1px solid;
  border-radius: 10px;
}
// 二级表格行背景色透明
::v-deep .el-table__cell.el-table__expanded-cell {
  background: transparent;
}
// 暂无数据时展示样式
::v-deep .el-table__empty-block {
  min-height: 240px;
  font-size: 20px;
}
// 取消表格底部横线
// ::v-deep .el-table--border::after,
// .el-table--group::after,
// .el-table::before {
//   content: none;
// }
</style>
